<template>
<div>
<div>
  <div style="width: 150px;float: left">
    <el-input v-model="filterText" placeholder="Filter keyword" style="width: 150px" />
    <el-tree
        ref="tree"
        class="filter-tree"
        :data="list"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
    />
  </div>
  <div style="float: right;width: 900px">
   <div>
     <van-field placeholder="请输入账号" label="账号:" style="width: 250px;float: left"></van-field>
     <van-field placeholder="请输入姓名" label="姓名:" style="width: 250px;float: left"></van-field>
     <van-field placeholder="请输入手机号" label="手机号:" style="width: 250px;float: left"></van-field>
     <van-button style="width: 120px;float: right;background-color: blue">查询</van-button>
   </div>
  <div>
    <van-button style="width: 120px;background-color: olivedrab;float: left" @click="post_user">新增</van-button>
    <van-button style="width: 120px;background-color: olivedrab;float: left">删除</van-button>

<!--    <van-uploader :after-read="updalod" style="width: 100px;background-color: olivedrab;float: left"></van-uploader>-->
    <van-button style="width: 120px;background-color: olivedrab;float: left" @click="exportd">导出</van-button>
    <van-button style="width: 120px;background-color: olivedrab;float: left">导出</van-button>
    <van-button style="width: 120px;background-color: olivedrab;float: left" @click="update_type">冻结</van-button>
    <van-button style="width: 120px;background-color: olivedrab;float: left">解冻</van-button>
    <van-button style="width: 120px;background-color: olivedrab;float: left">回收站</van-button>
  </div>
  <div>
    <table cellspacing="1" cellpadding="10px" width="850px" style="text-align: center" border="1">
      <tr>
        <td><van-radio-group v-model="radio" direction="horizontal" >
          <van-radio name="1" shape="square"></van-radio>
        </van-radio-group></td>
        <td>账号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>手机号</td>
        <td>邮箱</td>
        <td>工号</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in dicts" :key="i">
        <td><van-radio-group v-model="radio" direction="horizontal">
          <van-radio :name="i.id" shape="square" @click="del_user(i.id)"></van-radio>
        </van-radio-group></td>
        <td>{{i.username}}</td>
        <td>{{ i.name }}</td>
        <td>{{get_geder(i.geter)}}</td>
        <td>{{i.phone}}</td>
        <td>{{i.email}}</td>
        <td>{{i.jobnum}}</td>
        <td>{{get_type(i.user_type)}}</td>
        <td>
          <van-button>编辑</van-button>
          <van-button @click="delete_user">删除</van-button>
        </td>
      </tr>
    </table>
  </div>
    <van-popup v-model:show="shows">
    <div style="width: 500px;height: 300px;font-size: 15px;padding: 10px">
      <van-field placeholder="请输入账号" label="账号:" v-model="username"></van-field>
      <van-field placeholder="请输入密码" label="密码:" v-model="password"></van-field>
      <van-field placeholder="请输入确认密码" label="确认密码:" v-model="passwords"></van-field>
      <van-field placeholder="请输入姓名" label="姓名:" v-model="name"></van-field>
      <van-radio-group v-model="geter" direction="horizontal">
        <van-radio name="1">男</van-radio>
        <van-radio name="2">女</van-radio>
      </van-radio-group>
      <van-field placeholder="请输入手机号" label="手机号:" v-model="phone"></van-field>
      <van-field placeholder="请输入邮箱" label="邮箱:" v-model="email"></van-field>
      <van-field placeholder="请输入工号" label="工号:" v-model="jobnum"></van-field>
      <van-button @click="que_user">确认</van-button>
    </div>
    </van-popup>
  </div>

</div>
</div>
</template>

<script>
export default {
name: "userguanli",
  data(){
  return{
    list:[],
    filterText:'',
    dicts:[],
    dict:{1:'正常',2:'冻结'},
    geder:{1:'男',2:'女'},
    radio:'',
    shows:false,
    geter:1,
    username:'',
    password:'',
    phone:'',
    email:'',
    jobnum:'',
    name:'',
    pid:''
  }
  },
  methods:{
    update_type(){
      // this.myaxios('')
    },
    del_user(id){
      console.log(id)
      this.pid=id
    },
    delete_user(){
      this.myaxios("http://localhost:5000/delete_user",'delete',{'pid':this.pid})
      .then(res=>{
        console.log(res)
      })
    },
  // 导出
    exportd: function () {
      this.myaxios("http://localhost:5000/download", 'get', {})
          .then(res => {
            console.log(res)
          })
    },
    updalod(file){
      console.log(file.file)
      let data = new FormData()
      data.append("file", file.file)
      const axiosInstance = this.axios.create({withCredentials: false});
      axiosInstance({
        method: "post",
        url: "http://localhost:5000/upload",
        data: data
      }).then(res => {
        console.log(res)
      })
    },
    que_user(){
      this.myaxios("http://localhost:5000/post_user", 'post',
          {
            'geter':this.geter,
            'username':this.username,
            'password':this.password,
            'passwords':this.passwords,
            'phone':this.phone,
            'email':this.email,
            'jobnum':this.jobnum,
            'name':this.name,
          })
          .then(res => {
            console.log(res)
            this.$toast.fail(res.data.msg)
            this.shows=false
            this.get_data()

          })
    },
    post_user(){
      this.shows=true
    },
    get_type(type){
      return this.dict[type]
    }, get_geder(geder){
      return this.geder[geder]
    },
    filterNode(value, list) {
      if (!value) return true
      return list.label.indexOf(value) !== -1
    },
    get_data() {
      this.myaxios("http://localhost:5000/acporgn", 'get', {})
          .then(res => {
            console.log(res)
            this.list = res.data.list1
            console.log(this.list)
          })
    },get_user() {
      this.myaxios("http://localhost:5000/get_userguan", 'get', {'page':1})
          .then(res => {
            console.log(res)
            this.dicts = res.data.list
            console.log(this.dicts)
          })
    }
  },
  mounted() {
  this.get_data()
  this.get_user()
  }
}
</script>

<style scoped>

</style>
